<template>
    <div>
        <div class="bottom-warp">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="bottom-warp-box">
                        <overviewTitle
                            @radioChange="handleRadioChange1"
                            @dateChange="handleDateChange1"
                            title="能量管理"
                        ></overviewTitle>
                        <div
                            v-loading="loading1"
                            element-loading-text="数据加载中"
                            element-loading-spinner="el-icon-loading"
                        >
                            <!-- <div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="warp-box-left-top">
                      发电量：{{ line1FormData.line1LSum }}
                    </div>
                    deepColor深色；shallowColor浅色
                    <lineBox
                      :lineLeft="line1FormData.line1Left"
                      :lineRight="line1FormData.line1Right"
                      :totality="line1FormData.line1LSum"
                      deepColor="#3c8e17"
                      shallowColor="#8dd76b"
                    ></lineBox>
                    <el-row :gutter="10">
                      <el-col :span="12">
                        <div class="line-word">
                          自发自用:<span style="color: #3c8e17">
                            {{ line1FormData.line1Left }}&nbsp; </span
                          >度
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="line-word" style="text-align: right">
                          上网电量:<span style="color: #8dd76b">
                            {{ line1FormData.line1Right }} </span
                          >&nbsp;度
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <div class="warp-box-left-top">
                      用电量：{{ line2FormData.line2LSum }}
                    </div>

                    deepColor深色；shallowColor浅色
                    <lineBox
                      :lineLeft="line2FormData.line2Left"
                      :lineRight="line2FormData.line2Right"
                      :totality="line2FormData.line2LSum"
                      deepColor="#2a52c7"
                      shallowColor="#92aeff"
                    ></lineBox>
                    <el-row :gutter="10">
                      <el-col :span="12">
                        <div class="line-word">
                          自给自足:<span style="color: #2a52c7">
                            {{ line2FormData.line2Left }}&nbsp; </span
                          >度
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="line-word" style="text-align: right">
                          购买电量:<span style="color: #92aeff">
                            {{ line2FormData.line2Right }}&nbsp; </span
                          >度
                        </div>
                      </el-col>
                    </el-row>
                    <div style="position: relative">
                      <div style="position: absolute; top: -40px; left: -20px">
                        <el-divider direction="vertical"></el-divider>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div> -->
                            <div class="earnings-top">
                                发电功率 <span>{{ nengTotla }}</span> kwh
                            </div>
                            <div
                                class="echArtsBox"
                                ref="echArtsNengLRef"
                                v-if="nengEcharts.length"
                            ></div>
                            <el-empty
                                v-else
                                description="暂无相关数据"
                                :image-size="100"
                            ></el-empty>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="bottom-warp-box">
                        <overviewTitle
                            @radioChange="handleRadioChange2"
                            @dateChange="handleDateChange2"
                            title="收益"
                        ></overviewTitle>
                        <div
                            v-loading="loading2"
                            element-loading-text="数据加载中"
                            element-loading-spinner="el-icon-loading"
                            v-if="shouEcharts.length != 0"
                        >
                            <div class="earnings-top">
                                总收益 <span>{{ shouyiTotal }}</span> 元
                            </div>
                            <div class="echArtsEarnings" ref="earningsRef">
                                <!-- <el-empty
                                    description="暂无相关数据"
                                    :image-size="150"
                                ></el-empty> -->
                            </div>
                        </div>
                        <el-empty
                            v-else
                            :image-size="100"
                            description="暂无相关数据"
                        ></el-empty>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import overviewTitle from "./title.vue";
import lineBox from "./linebox.vue";
import { getQueryStationChart } from "@/api/solarPower/index.js";
export default {
    props: {
        paramData: {
            type: Object,
            default: () => {},
        },
    },
    name: "overviewBottom",
    components: {
        overviewTitle,
        lineBox,
    },
    data() {
        return {
            radio1: "1",
            date1: this.dayjs().format("YYYY-MM-DD"),
            radio2: "1",
            date2: this.dayjs().format("YYYY-MM-DD"),
            loading1: false,
            loading2: false,
            line2FormData: {
                line2Left: 50,
                line2Right: 50,
                line2LSum: 100,
            },
            line1FormData: {
                line1Left: 50,
                line1Right: 50,
                line1LSum: 100,
            },
            echArtsNengLData: [
                {
                    name: "光伏发电功率",
                    data: [
                        { value: 10 },
                        { value: 40 },
                        { value: 20 },
                        { value: 40 },
                        { value: 60 },
                        { value: 30 },
                    ],
                    color: "#18cf87",
                },
                {
                    name: "用电功率",
                    data: [
                        { value: 20 },
                        { value: 10 },
                        { value: 80 },
                        { value: 120 },
                        { value: 160 },
                        { value: 60 },
                    ],
                    color: "#f76354",
                },
                {
                    name: "自发自用功率",
                    data: [
                        { value: 40 },
                        { value: 50 },
                        { value: 10 },
                        { value: 60 },
                        { value: 90 },
                        { value: 60 },
                    ],
                    color: "#3798fe",
                },
                {
                    name: "储能充电功率",
                    data: [
                        { value: 10 },
                        { value: 50 },
                        { value: 30 },
                        { value: 140 },
                        { value: 120 },
                        { value: 90 },
                    ],
                    color: "#038ba8",
                },
                {
                    name: "储能放电电功率",
                    data: [
                        { value: 210 },
                        { value: 110 },
                        { value: 180 },
                        { value: 190 },
                        { value: 260 },
                        { value: 160 },
                    ],
                    color: "#ac44fb",
                },
            ],
            lengthData: [],
            seriesN: [],
            boundaryGapN: false,
            typeN: "line",
            shouyiTotal: 0,
            nengTotla: 0,
            echartsNengL: null,
            nnegXData: [],
            nengEcharts: [],
            shouEcharts: [],
        };
    },
    created() {},
    mounted() {
        // this.getNengLiangData();
        // this.getShouYiData();
        // console.log("paramData", this.paramData.id);
        if (this.paramData.id) {
            this.getNengLiangData();
            this.getShouYiData();
        }
    },
    watch: {
        paramData: {
            handler(val) {
                if (val.id) {
                    this.getNengLiangData();
                    this.getShouYiData();
                }
            },
            deep: true,
        },
    },
    methods: {
        handleRadioChange1(val, date) {
            this.radio1 = val;
            this.date1 = date;
            if (val == "1") {
                this.boundaryGapN = false;
                this.typeN = "line";
            } else {
                this.boundaryGapN = true;
                this.typeN = "bar";
            }
            this.getNengLiangData();
        },
        handleDateChange1(val) {
            this.date1 = val;
            this.getNengLiangData();
        },
        //能量管理数据
        getNengLiangData() {
            // console.log("11111111", this.radio1, this.date1);
            this.line2FormData = {
                line2LSum: 14.16,
                line2Left: 0.14,
                line2Right: 14.02,
            };
            this.line1FormData = {
                line1LSum: 49.84,
                line1Left: 48.1,
                line1Right: 0.84,
            };
            const fromData = {
                chartType: 1,
                dateType: this.radio1,
                date: this.date1,
                id: this.paramData.id,
            };
            this.loading1 = true;
            getQueryStationChart(fromData).then((res) => {
                this.nnegXData = [];
                this.seriesN = [];
                const resData = res.data;
                const { code, data, msg } = resData;
                if (code == 200) {
                    this.loading1 = false;
                    if (data) {
                        this.nengTotla = data.total;
                        this.nengEcharts = data.chartData;
                        this.echArtsNengLData = data.chartData;
                        for (let i = 0; i < data.chartData.length; i++) {
                            var arrData = [];
                            this.lengthData = [];
                            for (
                                let j = 0;
                                j < data.chartData[i].data.length;
                                j++
                            ) {
                                arrData.push(data.chartData[i].data[j].value);
                                this.nnegXData.push(
                                    data.chartData[0].data[j].time
                                );
                            }
                            this.lengthData.push(data.chartData[i].name);
                            this.seriesN.push({
                                name: data.chartData[i].name,
                                type: this.typeN,
                                smooth: true,
                                // itemStyle: {
                                //   color: this.echArtsNengLData[i].color,
                                // },
                                areaStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(
                                        1,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "#f9fafb",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#d4edf2",
                                            },
                                            {
                                                offset: 1,
                                                color: "#a2d6e0",
                                            },
                                        ]
                                    ),
                                },
                                data: arrData,
                            });
                        }
                        // console.log("this.seriesN", this.seriesN);
                        // console.log("this.lengthData", this.lengthData);
                        this.$nextTick(() => {
                            this.getEchartsNengL();
                        });
                        // this.getEchartsNengL();
                    } else {
                        this.nengEcharts = [];
                        this.nengTotla = 0;
                    }
                    // this.getEchartsNengL();
                } else {
                    this.loading1 = false;
                    this.$message.error(msg);
                }
            });

            // for (let i = 0; i < this.echArtsNengLData.length; i++) {
            //   var arrData = [];
            //   for (let j = 0; j < this.echArtsNengLData[i].data.length; j++) {
            //     arrData.push(this.echArtsNengLData[i].data[j].value);
            //   }
            //   this.lengthData.push(this.echArtsNengLData[i].name);
            //   this.seriesN.push({
            //     name: this.echArtsNengLData[i].name,
            //     type: this.typeN,
            //     smooth: true,
            //     itemStyle: {
            //       color: this.echArtsNengLData[i].color,
            //     },
            //     areaStyle: {
            //       color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            //         {
            //           offset: 0,
            //           color: "#f9fafb",
            //         },
            //         {
            //           offset: 0.5,
            //           color: "#d4edf2",
            //         },
            //         {
            //           offset: 1,
            //           color: "#a2d6e0",
            //         },
            //       ]),
            //     },
            //     data: arrData,
            //   });
            // }
            // this.getEchartsNengL();
        },
        // 能量Echars
        getEchartsNengL() {
            var echArtsNengLRef = this.$refs.echArtsNengLRef;
            let myChart = this.$echarts.getInstanceByDom(
                this.$refs.echArtsNengLRef
            );
            if (myChart == null) {
                myChart = this.$echarts.init(echArtsNengLRef);
            } else {
                myChart.clear();
            }

            var option = {
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    boundaryGap: this.boundaryGapN,
                    data: this.nnegXData,
                },
                tooltip: {
                    trigger: "axis",
                },
                yAxis: {
                    type: "value",
                },
                legend: {
                    data: this.lengthData,
                    icon: "pin", //图标
                    itemHeight: 10, //高度
                    itemWidth: 20, //宽度
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    top: "40",
                    containLabel: true,
                },
                // dataZoom: [
                //   {
                //     start: 0, // 默认为0
                //     end: 10, // 默认为100
                //     type: 'slider',
                //     // maxValueSpan: 2, // 显示数据的条数(默认显示10个，注意：从 0 开始计算)
                //     // xAxisIndex: [0],
                //     // handleSize: 0, // 滑动条的 左右2个滑动条的大小
                //     height: 0,
                //     bottom: 10,
                //     borderColor: 'transparent',
                //     showDataShadow: false, // 是否显示数据阴影 默认auto
                //     showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                //     filterMode: 'filter',
                //     brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                //     moveHandleStyle: {
                //       color: 'rgba(0,0,0,0.2)',
                //       shadowColor: 'rgba(0,0,0,0)',
                //       borderCap: 'round',
                //     },
                //   },
                //   {
                //     start: 0, // 默认为0
                //     end: 10, // 默认为100
                //   },
                // ],
                // series: [
                //   {
                //     name: 'Fake Data',
                //     type: 'line',
                //     itemStyle: {
                //       color: 'rgb(255, 70, 131)',
                //     },
                //     areaStyle: {
                //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //         {
                //           offset: 0,
                //           color: 'rgb(255, 158, 68)',
                //         },
                //         {
                //           offset: 1,
                //           color: 'rgb(255, 70, 131)',
                //         },
                //       ]),
                //     },
                //     data: [150, 230, 224, 218, 135, 147, 260],
                //   },
                // ],
                series: this.seriesN,
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            this.seriesN = [];
        },
        handleRadioChange2(val, date) {
            this.radio2 = val;
            this.date2 = date;
            this.getShouYiData();
        },
        handleDateChange2(val) {
            console.log(222222333, val);
            this.date2 = val;
            this.getShouYiData();
        },
        // 收益数据
        getShouYiData() {
            const fromData = {
                chartType: 2,
                dateType: this.radio2,
                date: this.date2,
                id: this.paramData.id,
            };
            this.loading2 = true;
            getQueryStationChart(fromData).then((res) => {
                const resData = res.data;
                const { code, data, msg } = resData;
                if (code == 200) {
                    this.loading2 = false;
                    if (data) {
                        this.shouEcharts = data.chartData;
                        this.shouyiTotal = data.total;
                        this.$nextTick(() => {
                            this.getEarningsEcharts(data.chartData);
                        });
                        // this.getEarningsEcharts(data.chartData);
                    } else {
                        this.shouEcharts = [];
                        this.shouyiTotal = 0;
                    }
                } else {
                    this.$message.error(msg);
                }
            });

            // console.log("22222222222", this.radio2, this.date2);
        },
        // 收益echarts
        getEarningsEcharts(val) {
            const xData = val.map((item) => {
                return item.time;
            });
            const seriesData = val.map((item) => {
                return item.value;
            });
            // console.log("object", xData, seriesData);
            var earningsRef = this.$refs.earningsRef;
            let myChart = this.$echarts.getInstanceByDom(
                this.$refs.earningsRef
            );
            if (myChart == null) {
                myChart = this.$echarts.init(earningsRef);
            } else {
                myChart.clear();
            }
            var option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    top: "40",
                    containLabel: true,
                },
                legend: {
                    data: ["收益"],
                    icon: "pin", //图标
                    itemHeight: 10, //高度
                    itemWidth: 20, //宽度
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisTick: {
                            alignWithLabel: true,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "收益",
                        type: "bar",
                        barWidth: "65%",
                        color: "#b652ff",
                        data: seriesData,
                    },
                ],
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.el-divider--vertical {
    height: 2em;
}
.bottom-warp {
    width: 100%;
    margin-top: 10px;
    overflow-x: hidden;
    .bottom-warp-box {
        height: 300px;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        padding: 10px;
        .warp-box-left-top {
            font-size: 12px;
            color: #000;
            font-weight: bold;
        }
        .echArtsBox {
            width: 100%;
            height: 215px;
        }
        .earnings-top {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: #999;
            span {
                color: #000;
            }
        }
        .echArtsEarnings {
            width: 100%;
            height: 240px;
        }
        .line-word {
            font-size: 12px;
            margin-top: -15px;
        }
    }
}
</style>
